<template>
  <div class="padding-20">
    <div class="flex justify-between">
      <tab ref="tab" :tabList="tabList" @tabChange="tabChange"></tab>
      <div class="project-select">
        <el-select v-model="projectKey" size="mini" placeholder="请选择项目">
          <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
        </el-select>
      </div>
    </div>
    <bar style="height: 350px" ref="bar" :ch-config="settingConfig" :banLegendDefaultClick="true"></bar>
  </div>
</template>
<script>
  import { barConfig } from '@js/echartsConfig';
  import Bar from '@c/echarts/bar';
  import tab from '@c/tab.vue';
  import { apiArrearateRate } from '../../../api/businessBuilding';
  export default {
    props: {
      projectOptions: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    components: { tab, Bar },

    data() {
      return {
        projectKey: '',
        settingConfig: this.lodash.cloneDeep(barConfig),
        model: {},
        activeTab: 'exceed',
        tabList: [
          {
            type: 'exceed',
            lable: '30天及以上欠费',
            num: 1048.88,
            nuit: '万',
          },
          {
            type: 'inside',
            lable: '30天以内欠费',
            num: 271.8,
            nuit: '万',
          },
        ],
      };
    },

    methods: {
      async initData() {
        let res = await apiArrearateRate({ queryType: 1 });
        this.tabList[0].num = res.ge30DayArrears;
        this.tabList[1].num = res.lt30DayArrears;
        this.model = res;
        this.setChartsData();
      },

      //set柱状图数据
      setChartsData() {
        let data = this.activeTab == 'exceed' ? this.model.ge30DayArrearsList : this.model.lt30DayArrearsList;
        this.settingConfig.xAxisData.splice(0, this.settingConfig.xAxisData.length);
        this.settingConfig.list[0].data.splice(0, this.settingConfig.list[0].data.length);
        for (let i in data) {
          this.settingConfig.xAxisData.push(data[i].projectName);
          this.settingConfig.list[0].data.push(data[i].amountArrears);
        }
        //初始化echart
        this.$nextTick(() => {
          this.$refs.bar.initChart();
        });
      },

      tabChange(item) {
        this.activeTab = item.type;
        this.setChartsData();
      },

      initChartConfig() {
        this.settingConfig.list[0].itemStyle = {
          normal: {
            color: '#00C3C0',
          },
        };
        this.settingConfig.title = '金额(万)';
        this.settingConfig.gridTop = '60px';
        this.settingConfig.titleTop = 20;
        this.settingConfig.yAxis.grainUnit = '';
        this.settingConfig.list[0].label.formatter = '{c}';
        this.settingConfig.list[0].label.textStyle.color = '#00C3C0';
      },
    },

    created() {
      this.initChartConfig();
      this.initData();
    },

    mounted() {},
  };
</script>
<style scoped lang="scss"></style>
